<template>
  <div class="icon-number2">
    <div class="icon" :class="'icon-'+icon"></div>
    <div class="name">{{name}}：<span class="value">{{value}}</span></div>
  </div>
</template>

<script>
export default {
  name: "IconNumber2",
  props:{
    icon:{
      type:String,
      default:'',
    },
    name:{
      type:String,
      default:'',
    },
    value:{
      type:String,
      default:'',
    }
  }
}
</script>

<style scoped lang="scss">
.icon-number2{
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon{
    width: 105px;
    height: 105px;
  }
  .name,.value{
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
  }
  .value{
    color: #1288ce;
  }
  .icon-1{
    background: url("~@/assets/images/statistical3/icon1.png") no-repeat center;
    background-size: 100% 100%;
  }
  .icon-2{
    background: url("~@/assets/images/statistical3/icon2.png") no-repeat center;
    background-size: 100% 100%;
  }
  .icon-3{
    background: url("~@/assets/images/statistical3/icon3.png") no-repeat center;
    background-size: 100% 100%;
  }
  .icon-4{
    background: url("~@/assets/images/statistical3/icon4.png") no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
